<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn01" onclick="test()">单击</button>
    <script>
        /**
         * 1.事件 event
         * 2.事件的分类
         * (1)鼠标事件：单击(click),双击(dbclick),mouseover,mouseenter,mouseleave,mouseleave,mouseleaveover
         * (2)键盘事件：keyup,keydown
         * (3)表单事件：blur 模糊,失去焦点, focus 获取焦点 , change发生改变, submit提交事件 
         **/
        function test(){
            console.log("你点击了单击按钮!");
        }
        //2.动态绑定,获取元素,对元素增加事件
        //document.getElementById(),document.querySelect()
        var btnObj1=document.getElementById("btn01");
        var btnObj2=document.getElementsByTagName("button")[0];
        var btnObj3=document.querySelector("button");
        var btnObj4=document.querySelectorAll("button")[0];
        var btnObj5=document.querySelectorAll("button")[0];
        var btnObj6=document.querySelectorAll("button")[0];
        console.log(btnObj1,btnObj2,btnObj3,btnObj4);
        btnObj1.onclick=function(e){
            console.log("动态绑定,单击事件1!")
        }
        btnObj2.onclick=function(){
            console.log("动态绑定,单击事件2!");
        }
        //1.动态绑定取代行内式 2.多个动态绑定，最后一个起作用
        //3.事件监听方式addEventListener(type,callback,capture),捕获,冒泡
        btnObj3.addEventListener('click',function(){
            console.log("监听方式,3!");
        })
        btnObj4.addEventListener('click',function(){
            console.log("监听方式,4!");
        })
        btnObj5.addEventListener('click',function(){
            console.log("监听方式,5!");
        })
        btnObj6.addEventListener('click',function(){
            console.log("监听方式,6!");
        })
    </script>
</body>
</html>